* {
    margin:0;
    padding:0;
}


div {
    width:200px;
    height:200px;
    background-image:url("./pic8.jpeg");
    background-size: cover;
    transform:matrix(-1,0,0,1,0,0);
    /*
        | -1, 0, 0 |     | x |      | -x |
        | 0 , 1, 0 |  *  | y |   =  | -y |
        | 0 , 0, 1 |     | 1 |      | 1  |
    */
}


/* 矩阵就是transform给咱们选中的计算规则 */
/* 也就是说可以通过提供的矩阵计算出相应的变换结果，一个矩阵对应一种变换 */
/* 实际被变换的元素可以看成无数个像素点构成的，这个矩阵会使元素像素点的坐标点进行改变，进而实现变换 */


/*
     计算规则       元素像素点原始坐标      变换之后的坐标
    | 1 0 e |           | x |              | x + e |
    | 0 1 f |     *     | y |       =      | y + f |
    | 0 0 1 |           | 1 |              | 1     |
    =>  matrix(1,0,0,1,e,f); === translate(x, y);



    | a,0,0 |     | x |      | ax |
    | 0,d,0 |  *  | y |   =  | dy |
    | 0,0,1 |     | 1 |      | 1  |
    =>  matrix(a,0,0,d,0,0); === scale(x, y);




    | cos(θ),-sin(θ),e |     | x |      
    | sin(θ),cos(θ) ,f |  *  | y |   =  ···
    | 0     ,0      ,1 |     | 1 |      
    =>  matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0); === rotate(θ);




    matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1) 3d缩放
    matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1) 3d平移

*/
